@()(implicit request: play.api.mvc.RequestHeader)
@main("Sequence Fetch") {

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Sequence Fetch</h2>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-3">
			<div class="bs-docs-sidebar" role="complementary">
				<ul class="nav bs-docs-sidenav myMainUl">
					<li class="active"><a href="#single" data-toggle="tab">Single Sequence Fetch</a></li>
					<li class=""><a href="#multiple" data-toggle="tab">Multiple Sequences Fetch</a></li>
				</ul>
			</div>
		</div>

		<div class="col-sm-8 tab-content myform" >

			<div class="tab-pane active" id="single">
				<form class="form-horizontal" method="get" id="form">
					<h4>Required:</h4>
					<hr>

					<div class="form-group">
						<label class="control-label col-sm-3">Species:</label>
						<div class="col-sm-9" >
							<div class='radio' id='species'></div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">Chromosome:</label>
						<div class="col-sm-3">
							<input class="form-control chr" name="chr" id="chr">
						</div>
						<label class="control-label">e.g., <a href="javascript:void(0);"><em class="myShowExample">NC_056557</em></a></label>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">Start:</label>
						<div class="col-sm-3">
							<input class="form-control" name="start" id="start">
						</div>
						<label class="control-label">e.g., <a href="javascript:void(0);"><em class="myShowExample">15</em></a></label>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">End:</label>
						<div class="col-sm-3">
							<input class="form-control" name="end" id="end">
						</div>
						<label class="control-label">e.g., <a href="javascript:void(0);"><em class="myShowExample">600000</em></a></label>
					</div>
					<hr>
					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-3">
							<button type="button" class="btn btn-primary mySingleSearch" style="width: 90%;" id="search">
								Search</button>
						</div>
					</div>
				</form>
			</div>

			<div class="tab-pane " id="multiple">
				<form class="form-horizontal"  method="get" id="form">
					<h4>Required:</h4>
					<hr>

					<div class="form-group">
						<label class="control-label col-sm-2">Species:</label>
						<div class="col-sm-10" >
							<div class='radio' id='species'></div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-2">Region:</label>
						<div class="col-sm-8">
							<textarea class="form-control" name="region" id="region" rows="5"></textarea>
							<span class="help-block">e.g.,&nbsp;<a href="javascript:void(0);"><em class="myShowExample">
								NC_056557:1-2000  NC_056557:2500-4000</em></a></span>
						</div>
					</div>
					<hr>
					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-3">
							<button type="button" class="btn btn-primary myMultipleSearch" style="width: 90%;" id="search">
								Search</button>
						</div>
					</div>
				</form>
			</div>

		</div>
	</div>

	<div id="result" style="display: none">
		<hr>
		<h4>Sequence:
			<button class="btn btn-primary myDownload"><i class="fa fa-download"></i>&nbsp;Download</button>
		</h4>
		<div class="form-group">
			<div class="col-sm-12">
				<textarea class="form-control monospace" name="queryText" id="queryText" rows="15"></textarea>
			</div>
		</div>
	</div>

	<script>
			$(function () {

                SeqFetch.init

			})

	</script>
}